import React, { useState, useEffect } from 'react'
import { Settings } from 'lucide-react'
import QuickLinks from './components/QuickLinks'
import SearchBar from './components/SearchBar'
import SettingsModal from './components/SettingsModal'
import { getUserFingerprint } from './utils/userIdentification'

function App() {
  const [showSettings, setShowSettings] = useState(false)
  const [background, setBackground] = useState('')
  const [searchEngine, setSearchEngine] = useState('google')
  const [title, setTitle] = useState('Navigator')
  const [userFingerprint, setUserFingerprint] = useState<string | null>(null)

  useEffect(() => {
    const initializeUserData = async () => {
      const fingerprint = await getUserFingerprint()
      setUserFingerprint(fingerprint)
      const savedBackground = localStorage.getItem(`background_${fingerprint}`)
      const savedSearchEngine = localStorage.getItem(`searchEngine_${fingerprint}`)
      const savedTitle = localStorage.getItem(`title_${fingerprint}`)
      if (savedBackground) {
        setBackground(savedBackground)
      } else {
        setBackground('https://source.unsplash.com/random/1920x1080/?nature')
      }
      if (savedSearchEngine) {
        setSearchEngine(savedSearchEngine)
      }
      if (savedTitle) {
        setTitle(savedTitle)
      }
    }
    initializeUserData()
  }, [])

  useEffect(() => {
    document.title = title
  }, [title])

  const handleBackgroundChange = (newBackground: string) => {
    setBackground(newBackground)
    if (userFingerprint) {
      localStorage.setItem(`background_${userFingerprint}`, newBackground)
    }
  }

  const handleSearchEngineChange = (newSearchEngine: string) => {
    setSearchEngine(newSearchEngine)
    if (userFingerprint) {
      localStorage.setItem(`searchEngine_${userFingerprint}`, newSearchEngine)
    }
  }

  const handleTitleChange = (newTitle: string) => {
    setTitle(newTitle)
    if (userFingerprint) {
      localStorage.setItem(`title_${userFingerprint}`, newTitle)
    }
  }

  return (
    <div 
      className="min-h-screen bg-cover bg-center flex flex-col items-center justify-center p-4"
      style={{ backgroundImage: `url(${background})` }}
    >
      <div className="absolute top-4 right-4">
        <button
          onClick={() => setShowSettings(true)}
          className="text-white hover:text-gray-200 transition-colors"
        >
          <Settings size={24} />
        </button>
      </div>
      <div className="w-full max-w-2xl bg-white bg-opacity-80 rounded-lg shadow-lg p-8">
        <h1 className="text-4xl font-bold text-center mb-8">{title}</h1>
        <SearchBar searchEngine={searchEngine} />
        <QuickLinks />
      </div>
      {showSettings && (
        <SettingsModal 
          onClose={() => setShowSettings(false)}
          onBackgroundChange={handleBackgroundChange}
          onSearchEngineChange={handleSearchEngineChange}
          onTitleChange={handleTitleChange}
          currentBackground={background}
          currentSearchEngine={searchEngine}
          currentTitle={title}
        />
      )}
    </div>
  )
}

export default App